import React from "react";
import { useTranslation } from "@/src/i18n";
import { Box, Text, Flex, CloseButton } from "@chakra-ui/react";
import { CheckIcon } from "@chakra-ui/icons";

interface MouseInfoToastProps {
  data: {
    dpiLevel: number;
    dpiValue: number;
    reportRate: number;
  };
  onClose?: () => void;
}

const MouseInfoToast: React.FC<MouseInfoToastProps> = ({ data, onClose }) => {
  const { t } = useTranslation("");

  const details = [
    {
      label: t("dpiLevel"),
      value: data.dpiLevel + 1,
    },
    {
      label: t("dpiValue"),
      value: data.dpiValue,
    },
    {
      label: t("reportRate"),
      value: data.reportRate,
    },
  ];

  return (
    <Box
      bg="#87CEEB"
      borderRadius="6px"
      p="12px"
      minW="280px"
      boxShadow="0 4px 12px rgba(0, 0, 0, 0.15)"
      border="1px solid rgba(255, 255, 255, 0.2)"
    >
      <Flex align="center" justify="space-between" mb="12px">
        <Flex align="center" gap="8px">
          <Box
            w="20px"
            h="20px"
            bg="green"
            borderRadius="50%"
            display="flex"
            alignItems="center"
            justifyContent="center"
          >
            <CheckIcon color="#ffffff" width="12px" height="12px" />
          </Box>
          <Text fontWeight="600" color="#333333" fontFamily="sans-serif">
            {t("mouseInfoUpdated")}
          </Text>
        </Flex>
        <CloseButton
          color="black"
          size="sm"
          onClick={onClose}
          aria-label="close"
        />
      </Flex>

      {details.length > 0 && (
        <Box ml="28px">
          {details.map((detail, index) => (
            <Text key={index} color="#333333" mb="4px">
              {detail.label}: {detail.value}
            </Text>
          ))}
        </Box>
      )}
    </Box>
  );
};

export default MouseInfoToast;
